/**
* Created by ren on 2016/12/28.
*/
<template>
  <div class='goodsList-wrap'>
    <Nav :cut="'goodsList'"></Nav>
    <div class="container">
      <div class="goodsList">
        <template v-for="(item,index) in goodsData.content">
          <div :class="{goods:true}">
            <a :href="'goodsdetail/'+item.id" target="_blank">
              <div class="img">
                <img img v-lazy="loadImg(item.imgUrl)" alt="">
              </div>
              <div class="name" :title="item.shopName">{{item.shopName}}</div>
              <div class="price">¥<span
                style="font-size: 18px">{{(item.price/100.0).toFixed(2).split('.')[0]}}</span><span>.{{(item.price/100.0).toFixed(2).split('.')[1]}}</span>
              </div>
            </a>
          </div>
          <div class="line" v-if="(index+1)%4!==0"><img src="./assets/line4.png" alt=""></div>
        </template>
      </div>
      <div class="paging-wrap">
        <div class="paging" v-if="goodsData">
          <img src="./assets/prev.png" style="float: left;margin-top: 23px;cursor: pointer" @click="prev">
          <div class="page" style="float: left">
            <div v-for="(item,index) in goodsData.totalPages" v-if="goodsData.totalPages<9"
                 :class="{active:index===nextPage}" @click="paging(index)">{{index+1}}
            </div>
            <template v-if="goodsData.totalPages>8">
              <template v-if="goodsData.totalPages-9<nextPage">
                <div v-for="(item,index) in goodsData.totalPages" v-if="index>goodsData.totalPages-9"
                     :class="{active:index===nextPage}" @click="paging(index)">{{index+1}}
                </div>
              </template>
              <template v-else>
                <div v-for="(item,index) in goodsData.totalPages" v-if="index<5+nextPage&&index>nextPage-1"
                     :class="{active:index===nextPage}"
                     @click="paging(index)">{{index+1}}
                </div>
                <div>……</div>
                <div v-for="(item,index) in goodsData.totalPages" v-if="index>goodsData.totalPages-3"
                     :class="{active:index===nextPage}" @click="paging(index)">{{index+1}}
                </div>
              </template>
            </template>
          </div>
          <img src="./assets/next.png" style="float: left;margin-top: 23px;cursor: pointer" @click="next">
          <div class="total">共{{goodsData.totalPages}}页</div>
        </div>
      </div>
    </div>
    <Notify :parentThis='this'></Notify>
  </div>
</template>

<script>
  import Nav from './components/Nav'
  import API from './api'
  import Notify from './components/Notify'
  export default {
    name: 'goodsList',
    components: {
      Notify,
      Nav
    },
    data: function () {
      return {
        notifyStatus: 2,
        goodsData: [],
        nextPage: 0
      }
    },
    props: ['_parentThis'],
    methods: {
      loadImg: function (path) {
        return API.path + path
      },
      findGoldshoppingList: function () {
        this.$http.post(API.findGoldshoppingList, {
          nextPage: this.nextPage,
          pageSize: 12
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            this.goodsData = result.object
          } else {
            this.notifyStatus = '0|' + result.message
          }
        }, (err) => {
          console.log(err)
        })
      },
      paging: function (page) {
        this.nextPage = page
        this.findGoldshoppingList()
      },
      prev: function () {
        if (this.nextPage > 0) {
          this.nextPage = this.nextPage - 1
          this.findGoldshoppingList()
        }
      },
      next: function () {
        if (this.nextPage < this.goodsData.totalPages - 1) {
          this.nextPage = this.nextPage + 1
          this.findGoldshoppingList()
        }
      }
    },
    beforeDestroy: function () {
      this._parentThis.cartStatus = true
    },
    mounted: function () {
      this.findGoldshoppingList()
      this._parentThis.cartStatus = false
    }
  }
</script>
